<template>
  <view class="bx-child-form">
    <view class="subsection-view">
      <!-- <u-subsection :list="tabList" :current="curTab" v-if="tabList&&tabList.length>1"></u-subsection> -->
     <u-tabs :list="tabList" :is-scroll="true" :current="curTab" v-if="tabList&&tabList.length>1" @change="changeTab">
      </u-tabs>
    </view>

    <view class="form-list">
      <view class="form-item" v-for="(item,index) in tabList">
        <bx-child-form :childList="item.colV2.child_service" :mainV2Data="item.colV2"
          v-if="item&&item.colV2&&item.colV2.child_service&&item.colV2.child_service.length>0&&curTab==index">
        </bx-child-form>
        <bx-form ref="bxChildForm" :form-name="item.name" :service="mainV2Data.service_name"
          :pageType="mainV2Data.view_model" :BxformType="mainV2Data.view_model" :fields="mainV2Data._fieldInfo"
          v-else-if="mainV2Data&&mainV2Data.service_name&&curTab==0&&item.type==='main'">
        </bx-form>
        <bx-form ref="bxFormChild" :formName="item.name" :service="item.service_name" pageType="detail"
          BxformType="detail" :fields="item.colV2._fieldInfo" v-show="curTab==index"
          v-else-if="item.colV2&&item.foreign_key&&item.foreign_key.view_model==='detail'&&curTab!==0&&curTab==index">
        </bx-form>
        <bx-table :tableName="item.name" :serviceName="item.serviceName" use_type="detaillist"
          :condition="item.childCondition" v-show="curTab==index"
          v-else-if="item&&item.view_model==='list'&&curTab!==0&&item.childCondition">
        </bx-table>

      </view>
    </view>
    <uni-collapse v-if="collapseList.length>0" accordion>
      <uni-collapse-item :title="item.label" v-for="(item,index) in collapseList">
        <template v-slot:title>
          <view class="table-name bg-white  text-blue">
            <text>{{item.label||''}}</text>
            <button class="cu-btn sm light margin-left border  round  text-blue" v-if="item&&item.view_model==='list'"
              @click.stop="refreshTable(index)"> <text class="cuIcon-refresh"></text> 刷新</button>
          </view>
        </template>
        <bx-child-form :childList="item.colV2.child_service" :mainV2Data="item.colV2"
          v-if="item&&item.colV2&&item.colV2.child_service&&item.colV2.child_service.length>0&&curTab==index">
        </bx-child-form>
        <bx-form ref="bxFormChild" :form-name="item.name" :service="item.service_name" pageType="detail"
          BxformType="detail" :fields="item.colV2._fieldInfo"
          v-else-if="item.colV2&&item.foreign_key&&item.foreign_key.view_model==='detail'">
        </bx-form>
        <bx-table :serviceName="item.serviceName" use_type="detaillist" :condition="item.childCondition"
          v-else-if="item&&item.view_model==='list'&&item.childCondition" :ref="'bxTable'+index+''">
        </bx-table>
      </uni-collapse-item>
    </uni-collapse>
  </view>
</template>

<script>
  export default {
    name: "bx-child-form",
    data() {
      return {
        curTab: 0,
        curCollapse: 0
      };
    },
    computed: {
      setChildList() {
        if (this.mainV2Data?.mainData && Array.isArray(this.childList) && this.childList.length > 0) {
          let mainData = this.mainV2Data.mainData;

          return this.childList.filter(item => {
            item.serviceName = item.foreign_key.ref_service || item.service_name
            item.childCondition = item.childCondition || item?.colV2?.childCondition
            if (item.service_view_name === '费用项组成列表') {
              debugger

            }
            let show_child_list_expr = item?.foreign_key?.show_child_list_expr
            if (show_child_list_expr) {
              show_child_list_expr = show_child_list_expr.replace('{{', '').replace('}}', '')
              return eval(show_child_list_expr)
            } else {
              return true
            }
          })
        }
      },
      tabList() {
        let tabList = []
        if (this.mainV2Data?.service_name) {
          let first = {
            service_name: this.mainV2Data?.service_name,
            label: this.mainV2Data.service_view_name.replace('查询', '详情'),
            name: this.mainV2Data.service_view_name.replace('查询', '详情'),
            type: "main"
          }
          if (first.name && first.name.indexOf('详情') == -1) {
            first.name += '详情'
          }
          tabList = [first]
          if (Array.isArray(this.setChildList) && this.setChildList.length > 0) {
            let tabs = this.setChildList.filter(item => item?.foreign_key?.show_ui_model === 'tabs')
            if (tabs.length > 0) {
              tabs.forEach(tab => {
                tab.label = tab.foreign_key?.section_name || tab.service_view_name
                tab.name = tab.label
                tab.view_model = tab?.foreign_key?.view_model
                tabList.push(tab)
              })
            }
          }
        }

        return tabList
      },
      collapseList() {
        let collapse = []
        if (Array.isArray(this.setChildList) && this.setChildList.length > 0) {
          return this.setChildList.filter(item => item?.foreign_key?.show_ui_model === 'collapse').map(item => {
            item.label = item.foreign_key?.section_name || item.service_view_name
            item.view_model = item?.foreign_key?.view_model
            return item
          })
        }
        return collapse
      }
    },
    props: {
      mainV2Data: {
        type: Object
      },
      childList: {
        type: Array
      },
    },
    methods: {
      refreshTable(index) {
        let refName = 'bxTable' + index + '';
        if (this.$refs[refName] && this.$refs[refName][0] && this.$refs[refName][0].refresh) {
          this.$refs[refName][0].refresh()
        }
      },
      changeTab(index) {
        this.curTab = index
        this.curChild = index - 1
      },
    }
  }
</script>

<style lang="scss" scoped>
  .bx-child-form {}

  .form-list {
    margin-bottom: 5px;
    background-color: #fff;

    .bx-form {
      margin-top: 5px;
    }
  }

  .table-name {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

  }

  :v-deep .uni-collapse-item__title-arrow {
    color: #0081ff;
  }

  .subsection-view {
    overflow-x: auto;
    width: auto;
  }
</style>
